<template>
	<div>
		<!-- 轮播图 -->
		<div>
			<el-carousel trigger="click" indicator-position="outside" height='512px'>
				<el-carousel-item v-for="(item,index) in carouselnav" :key="index">
					<div class="btnheaderbottom">
						<el-button type="warning" class="submit btn1" round plain @click="dialogVisible=true"><span
								style="font-size: 40px;">立即登录</span>
						</el-button>
					</div>
					<div class="btnheadermiddle">
						<el-button type="success" class="submit btn1" round plain
							@click="dialogVisiblesuperiority=true"><span style="font-size: 40px;">优势特色</span>
						</el-button>
					</div>
					<div class="btnheadertop">
						<el-button type="primary" class="submit btn1" round plain @click="operationdialogVisible=true">
							<span style="font-size: 40px;">操作指南</span>
						</el-button>
					</div>
					<img class="carousel_img" :src="item.url" style="width:100%;height:100%" />

				</el-carousel-item>

			</el-carousel>
		</div>
		<div>
			<div class="CountdownLine">
			</div>
			<div class="Countdown">
				<div class="Countdowntitle">
					<div class="Countdowntitlecolor">高考倒计时</div>
					<div class="countdown_content">距离{{Countdown_time}}高考还有<div
							style="display:inline-block;font-size:68px;margin:0 20px;position:relative;top:10px;color:rgba(51, 170, 255, 1);font-weight:bold">
							{{Countdown_Surplus}}
						</div>天</div>
				</div>
			</div>
			<div class="Countdown_bg"></div>
		</div>

		<!-- 新闻资讯 -->
		<div class="New">
			<div>
				<div class="NewTitle">新闻资讯</div>
				<div class="NewLine"></div>
			</div>
			<div class="news_content">
				<div class="News_subtitle" @click="jumpTo('/RegistrationInformation',1)" :class="{active:index==1}">
					报考资讯
				</div>
				<div class="News_subtitle" @click="jumpTo('/videoCenter',2)" :class="{active:index==2}">视频中心</div>
				<div class="more">
					<div style="display:inline-block" @click="jumpTo('/examnews')">更多</div>
					<div class="Register_img"><img src="../assets/more.png"></div>
				</div>

			</div>
			<div>
				<router-view></router-view>
			</div>
		</div>
		<div class="shareData">
			<div class="shareData_title1">数据共享</div>
			<div class="shareData_title2">一分一段表，批次控制线，数据变化图，分类别筛选</div>
		</div>

		<div class="content_b">
			<div class="left">
				<!-- 成功报考案例 -->
				<div class="example">
					<div class="NewTitle">成功报考案例</div>
					<div class="NewLine1"></div>
					<div class="more1">
						<div style="display:inline-block" @click="jumpTo('/applicationcases')">更多</div>
						<div class="Register_img"> <img src="../assets/more.png" style="width:100%;height:100%"></div>
					</div>
					<!-- <div class="example_content" v-for="(item,index) in resiger_item" :key="index" :class="{content_last:index==2}" >
              <div class="example_top">
                <div class="avater"><img :src="item.url" style="width:100%;height:100%"></div>
                <div class="example_name">{{item.name}}</div>
              </div>
              <div class="example_bottom">
                <div class="text_box"><div class="icon_img"><img src="../assets/location.png" style="width:100%" alt=""></div><div class="example_text">{{item.Address}}</div></div>
                <div class="text_box"><div class="icon_img"><img src="../assets/score.png" style="width:100%" alt=""></div><div class="example_text">{{item.num}}</div></div>
                <div class="text_box"><div class="icon_img2"><img src="../assets/subject.png" style="width:100%" alt=""></div><div class="example_text2">{{item.school}}</div></div>
                <div class="text_box"><div class="icon_img"><img src="../assets/read.png" style="width:100%" alt=""></div><div class="example_text">{{item.Profession}}</div></div>
              </div>
            </div> -->
					<div v-for="(item,index) in resiger_item" :key="index" style="display:inline-block">
						<case-item :item='item' :index='index'></case-item>
					</div>

				</div>
				<!-- 在线答疑 -->
				<div class="answer">
					<div class="NewTitle">在线答疑</div>
					<div class="NewLine2"></div>
					<div class="more1">
						<div style="display:inline-block">更多</div>
						<div class="Register_img"> <img src="../assets/more.png"></div>
					</div>
					<div class="content_box">
						<div class="answer_content" v-for="(item,index) in AnswerQuest" :key="index">
							<div class="answer_title">
								<div class="icon_question"><img src="../assets/question.png" alt=""
										style="width:100%;height:100%"></div>
								<div class="answer_title_text">{{item.title}}</div>
							</div>
							<div class="answer_text">
								{{item.content}}
							</div>

						</div>
						<div class="question_area" id="textarea">
							<el-input type="textarea" :rows="4" placeholder="请输入问题或关键词" v-model="textarea">
							</el-input>
							<div class="submit">
								提问
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<!-- 专家咨询 -->
				<div class="specialist_q">
					<div class="NewTitle">专家咨询</div>
					<div class="more1">
						<div style="display:inline-block">更多</div>
						<div class="Register_img"> <img src="../assets/more.png">
						</div>
					</div>
					<div class="specialist_content" v-for="(item,index) in teacher" :key="index"
						:class="{dashedoff:index==2}">
						<div class="avater2"><img :src="item.url" style="width:100%;height:100%"></div>
						<div class="specialist_right">
							<div class="specialist_name">{{item.name}}</div>
							<div class="specialist_middle">擅长领域:</div>
							<div class="specialist_subject">{{item.good}}</div>
						</div>
					</div>
				</div>
				<div class="service_area">
					<div class="NewTitle">服务地区</div>
					<div class="NewLine3"></div>
					<div class="clear"></div>
					<div style="margin-left:20px">
						<div class="area_content" v-for="(item,index) in Address" :key="index">
							{{item}}
						</div>
					</div>

				</div>
			</div>

		</div>
		<!-- 提示模态框 -->
		<div class="box">
			<el-dialog title="填报警示" :visible.sync="dialogVisible" width="70%">
				<div class="explain">
					<p style="width: 100%; font-size: 25px; text-align:justify;
										text-justify:inter-ideograph;">1.每年<span
							style="color:red; font-size: 25px;">6月22日00:00时---当年8月31日24:00时期间：注册账户只能凭借卡号和密码方可登录系统，输入一个真实的高考分数，</span>
							进行志愿方案的自主设计；同时，该卡号和密码一经使用将被锁定，不能再输入其他分数进行志愿方案的自主设计，但可以重复登录查看、修改志愿方案。
					</p>
					<p style="width: 100%; font-size: 25px; text-align:justify;
					text-justify:inter-ideograph;">2.每年<span
							style="color:red; font-size: 25px;">9月01日00:00时---次年6月21日24:00时期间</span>：新、老注册账户凭注册账号、密码可登录系统输入<span
							style="color:red; font-size: 25px;">无限个</span>成绩，进行<span
							style="color:red; font-size: 25px;">无限次</span>模拟填报。</p>
					<!-- <p style="width: 100%; font-size: 25px; text-align:justify;
					text-justify:inter-ideograph;">3.本平台<span
							style="color:red; font-size: 25px;">当前</span>仅支持除新疆、西藏、云南、吉林、内蒙省（区）外的其它26个省（市、区）的<span
							style="color:red; font-size: 25px;">普通本科</span></span>志愿填报。</p> -->
					<p style="width: 100%; font-size: 25px; text-align:justify;
					text-justify:inter-ideograph;">3.本平台<span
							style="color:red; font-size: 25px;">当前</span>可为除新疆、西藏、云南、吉林、内蒙省（区）外的其它26个省（市、区）的<span
							style="color:red; font-size: 25px;">普通本科</span>高考志愿填报提供参考服务。</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="jumpTo('/login',3)">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<!-- 特色优势 -->
		<div class="box">
			<el-dialog title="“大学导航”高考志愿填报服务平台优势与特色" :visible.sync="dialogVisiblesuperiority" width="70%">
				<!-- 	<el-row>
				  <el-col :span="24"><div >优势与特色一：基于“数学模型”计算“往年当量”的“相对分析法”更加科学准确</div></el-col>
				</el-row> -->
				<span class="titlefirst">优势与特色一：基于“数学模型”计算“往年当量”的“相对分析法”更加科学准确:</span>
				<div>
					<span
						class="titlesecond">“大学导航”高考志愿填报服务平台自主研发的“正运算数学模型”能够将考生当年的“全省排名”、“高考分数”、“超批次控制线分差”等高考数据换算为往年的相当量，即“往年当量”，这样的“相对分析法”比直接用考生当年的高考数据去进行的“绝对分析法”更科学、更准确。同时，自主研发“逆运算数学模型”能够根据高校往年的投档数据去预测当年可能的投档分数，这样的反运算方法能够进一步验证正运算结果的科学性、准确性。</span>
				</div>
				<span class="titlefirst">优势与特色二：“逆向思维”的高考志愿遴选理念能够充分满足考生的个性化需求:</span>
				<span
					class="titlesecond">一般来说，绝大多数人的高考志愿分析方法都是从自己心仪的大学中去查询自己能够考上的大学，即根据自己的“全省排名”、“高考分数”、“超批次控制线分差”等高考数据，去查询自己能否被心仪的院校录取，这样分析的方法是一种盲目的行为，其结果可能会发现有很多院校自己都上不了。而“大学导航”的高考志愿遴选理念是采用基于数学模型运算的逆向思维，让考生从能够考上的大学中去挑选自己心仪的大学，即平台会给出一大批可以报考的“冲一冲”、“稳一稳”、“保一保”志愿群，考生可以从这些能够考上的院校中去挑选自己心仪的大学。</span>
				<span class="titlefirst">优势与特色三：“学业规划”给高考成绩不理想的考生指明逆袭人生的路径和案例:</span>
				<span
					class="titlesecond">在“学业规划”栏目中，“学业路径”为考生提供在境内外读取本科、硕士、博士路径及就业指导服务；“学业安排”为考生指明了大学期间应该完成的学习任务及其方法指导服务；“学业达人”为考生提供了多个如何在不理想高考成绩背景下逆袭人生的励志案例，从而达到
					“跟着导航上大学”的目的。</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="dialogVisiblesuperiority=false">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import CaseItem from '../components/CaseItem.vue'
	export default {
		components: {
			CaseItem
		},
		data() {
			return {
				operationdialogVisible: false,
				dialogVisiblesuperiority: false,
				display: false,
				Countdown_time: Number,
				Countdown_Surplus: 50,
				dialogVisible: false,
				index: 1,
				textarea: "",
				carouselnav: [{
						title: "1",
						// url: "../pic/2.jpg",
						url:require("../pic/2.jpg")
					},
					{
						title: "2",
						url:require("../pic/2.jpg")
					},
				],
				resiger_item: [{
						name: "陈同学",
						// url: "../pic/2.jpg",
						url:require("../pic/3.jpg"),
						Address: '广东',
						num: '理科 670 (2018)',
						school: '清华大学',
						Profession: '数学专业',
					},
					{
						name: "陈同学",
						// url: "../pic/3.jpg",
						url:require("../pic/3.jpg"),
						Address: '广东',
						num: '理科 670 (2018)',
						school: '清华大学',
						Profession: '数学专业',
					},
					{
						name: "陈同学",
						// url: "../pic/3.jpg",
						url:require("../pic/3.jpg"),
						Address: '广东',
						num: '理科 670 (2018)',
						school: '清华大学',
						Profession: '数学专业',
					},
				],
				AnswerQuest: [{
						title: "什么是排名，位次，名次?",
						content: '高考位次概念是高考志愿填报指导专家阮吉鹏老师于2001年提出的一种全新概念，此后一直作为填报志愿的科学依据之一,' +
							'这种方法适合于考后出分、出分数段填报志愿的省市',
					},
					{
						title: "什么是排名，位次，名次?",
						content: '高考位次概念是高考志愿填报指导专家阮吉鹏老师于2001年提出的一种全新概念，此后一直作为填报志愿的科学依据之一,' +
							'这种方法适合于考后出分、出分数段填报志愿的省市,高考位次概念是高考志愿填报指导专家阮吉鹏老师于2001年提出的一种全新概念，此后一直作为填报志愿的科学依据之一,' +
							'这种方法适合于考后出分、出分数段填报志愿的省市',
					},
					{
						title: "什么是排名，位次，名次?",
						content: '高考位次概念是高考志愿填报指导专家阮吉鹏老师于2001年提出的一种全新概念，此后一直作为填报志愿的科学依据之一,' +
							'这种方法适合于考后出分、出分数段填报志愿的省市',
					},
				],
				teacher: [{
						name: "陈老师",
						// url: "../pic/4.jpg",
						url:require("../pic/4.jpg"),
						good: '志愿填报',

					},
					{
						name: "陈老师",
						// url: "../pic/4.jpg",
						url:require("../pic/4.jpg"),
						good: '志愿填报',

					},
					{
						name: "陈老师",
						// url: "../pic/4.jpg",
						url:require("../pic/4.jpg"),
						good: '志愿填报',

					},
				],
				Address: ["广东", "重庆", "北京", "上海", "广东", "重庆", "北京", "上海", "广东", "重庆", "北京", "上海", "广东", "重庆", "北京", "上海", ]

			}
		},
		methods: {
			jumpTo(router, index) {
				this.$router.push(router)
				if (index) {
					this.index = index
				}
			},
			login() {
			    window.open("https://xxx.oss.com/dxdh/1.%E8%80%83%E7%94%9F%E5%A6%82%E4%BD%95%E7%99%BB%E5%BD%95%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7.mp4", '_blank')
			},
			amount() {
			    window.open("https://xxx.oss.com/dxdh/2.%E5%A6%82%E4%BD%95%E6%9F%A5%E7%9C%8B%E5%BE%80%E5%B9%B4%E5%BD%93%E9%87%8F.mp4", '_blank')
			},
			subjectvoluntary() {
			    window.open("https://xxx.oss.com/dxdh/3.%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90%E9%99%90%E9%80%89%E6%96%B9%E6%A1%88.mp4", '_blank')
			},
			Optimalscheme() {
			    window.open("https://xxx.oss.com/dxdh/4.%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90%E4%BC%98%E9%80%89%E6%96%B9%E6%A1%88.mp4", '_blank')
			},
			Finalscheme() {
			    window.open("https://xxx.oss.com/dxdh/5.%E5%A6%82%E4%BD%95%E7%94%9F%E6%88%90%E6%9C%80%E7%BB%88%E6%96%B9%E6%A1%88.mp4", '_blank')
			},
			
			
			timeCalculate() {
				let today = new Date()
				// console.log(today.getMonth());
				if (today.getMonth() + 1 <= 6) {
					if (today.getMonth() + 1 == 6 && today.getDate() > 7) {
						this.Countdown_time = today.getFullYear() + 1
					} else {
						this.Countdown_time = today.getFullYear()
					}
				} else {
					this.Countdown_time = today.getFullYear() + 1
				}
				this.Countdown_Surplus = parseInt((Date.parse(`08 Jun ${this.Countdown_time} 00:00:00 GMT`) - today
					.getTime()) / 1000 / 60 / 60 / 24)
			},
		},

		watch: {},
		mounted() {
			// this.setSelected();s
			this.timeCalculate()
		},

	}
</script>
<style scoped>
	.News_subtitle {
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 400;
		display: inline-block;
		margin-right: 30px;
		color: rgba(174, 174, 174, 1);
		transition-duration: 0.3s;
		height: 45px;
		padding-bottom: 3px;

	}

	.explain {
		text-align: center;
		  /* justify-content: flex-start; */
		  /* align-items: auto; */
		  padding-left: 15px;
		  text-indent: -23px;
	}

	.box>>>.el-dialog__title {
		font-size: 40px !important;
	}

	.box>>>.el-button--small {
		font-size: 20px !important;
	}

	.News_subtitle:hover {
		color: rgba(51, 170, 255, 1);
		cursor: pointer;
		border-bottom: 3px solid rgba(51, 170, 255, 1);
	}

	.active {
		color: rgba(51, 170, 255, 1);
		border-bottom: 3px solid rgba(51, 170, 255, 1);
	}

	.Register_img {
		/* width: 20px; */
		/* float: right; */
		display: inline-block;
		margin-left: 12px;
		position: relative;
		top: 3px;
	}

	.titlefirst {
		font-size: 25px;
		font-family: Noto Sans SC;
		color: #38b48b;
		float: left;
		/* text-align: left; */
	}

	.titlesecond {
		text-align: justify;
		text-justify: inter-ideograph;
		text-indent: 40px;
		float: left;
		font-size: 23px;
		font-family: Noto Sans SC;
	}

	.carousel_img {
		/* object-fit:none; */
		height: 512px;
	}

	.CountdownLine {
		margin-top: 56px;
		width: 100%;
		background-color: #F7FF09;
		height: 50px;
	}

	.Countdown {
		position: relative;
		width: 860px;
		height: 98px;
		margin: 0 auto;
		border-radius: 15px;
		background-color: RGBA(255, 255, 191, 1);
		top: -75px;
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
		z-index: 2;

	}

	.Countdowntitle {
		font-size: 36px;
		position: relative;
		top: -12px;
	}

	.Countdowntitlecolor {
		color: #33AAFF;
		display: inline-block;
		font-size: 45px;
		font-family: Noto Sans SC;
		font-weight: 600;
		letter-spacing: 4px;
	}

	.countdown_content {
		display: inline-block;
		margin-left: 10px;
		font-family: Noto Sans SC;
		color: rgba(85, 85, 85, 1);
		font-weight: 400;
	}

	.btn1 {
		font-size: 90px;
		/* text-align: center; */
		/* margin-left: 100px; */
		width: 340px;
		height: 80px;
		font-family: Noto Sans SC;
		font-weight: 300;
		border-radius: 20px;
	}

	.btnheaderbottom {
		position: absolute;
		left: -25%;
		bottom: 10%;

	}

	.btnheadermiddle {
		position: absolute;
		left: -25%;
		bottom: 35%;
	}

	.btnheadertop {
		position: absolute;
		left: -25%;
		bottom: 60%;
	}

	.btnheader>>>.submit[data-v-ce7289b0] {
		font-size: 30px !important;
	}

	.New {
		background: #FFFFFF;
		width: 1425px;
		margin: 0 auto
	}

	.news_content {
		text-align: left;
		width: 1331px;
		margin: 0 auto;
		position: relative;
		border-bottom: 1px dashed #33AAFF;
	}

	.NewLine {
		background: rgba(51, 170, 255, .4);
		height: 1.5px;
		width: 1160px;
		margin-left: 21px;
		margin-top: 55px;
		margin-bottom: 40px;
		margin-right: 3%;
		float: left;
	}

	.NewLine1 {
		background: rgba(51, 170, 255, .4);
		height: 2.5px;
		width: 618.5px;
		margin-left: 25px;
		margin-top: 58px;
		margin-bottom: 20px;
		/* margin-right:3%; */
		float: left;
	}

	.NewLine2 {
		background: rgba(51, 170, 255, .4);
		height: 2.5px;
		width: 695px;
		margin-left: 25px;
		margin-top: 58px;
		margin-bottom: 20px;
		/* margin-right:3%; */
		float: left;
	}

	.NewLine3 {
		background: rgba(51, 170, 255, .4);
		height: 2.5px;
		width: 101px;
		margin-left: 25px;
		margin-top: 58px;
		margin-bottom: 20px;
		/* margin-right:3%; */
		float: left;
	}

	.more {
		/* width: 110px; */
		height: 30px;
		font-size: 20px;
		font-family: Noto Sans SC;
		font-weight: 400;
		display: inline-block;
		color: #BBBBBB;
		margin-left: 990px;
	}

	.more:hover {
		cursor: pointer;
	}

	.more1 {
		height: 50px;
		font-size: 20px;
		font-family: Noto Sans SC;
		font-weight: 400;
		display: inline-block;
		color: #BBBBBB;
		margin-left: 0px;
		margin-top: 42px;
	}

	.more1:hover {
		cursor: pointer;
	}

	.NewTitle {
		float: left;
		margin-left: 40px;
		margin-top: 32px;
		font-size: 35px;
		font-family: Noto Sans SC;
		font-weight: 500;
		/* line-height: 61px; */
		color: #4D4D4D;
	}

	.shareData {
		clear: both;
		margin-top: 32px;
		background: url("https://s-p-internet.oss-cn-shenzhen.aliyuncs.com/1622366615440");
		background-size: 100% 100%;
		width: 1425px;
		margin: 0 auto;
		height: 136px;
		margin-bottom: 30px;
		margin-top: 32px;
	}

	.shareData_title1 {
		padding-top: 24px;
		color: #EFFF00;
		font-size: 50px;
		font-family: Noto Sans SC;
		font-weight: 600;
		line-height: 40px;

	}

	.shareData_title2 {
		color: #FFFFFF;
		font-size: 24px;
		font-family: Noto Sans SC;
		line-height: 40px;
		margin-top: 22px;
	}

	.left {
		height: 1340px;
		width: 1065px;
		float: left;
	}

	.right {
		height: 950px;
		width: 337px;
		float: right;
	}

	.content_b {
		width: 1425px;
		height: 1350px;
		margin: 0 auto;
		margin-bottom: 70px;
	}

	.example {
		width: 1065px;
		height: 492px;
		background-color: #fff;
		position: relative;
	}

	.answer {
		width: 1064px;
		height: 850px;
		background-color: #fff;
		margin-top: 32px;
	}

	.answer_content {
		width: 970px;
		height: 145px;
		margin: 0 auto;
		margin-top: 20px;
		padding-bottom: 20px;
		border-bottom: 1px dashed #33AAFF;

	}

	.content_box {
		display: flex;
		flex-direction: column;

	}

	.answer_title {
		width: 335px;
		height: 30px;
		/* margin-left: ; */
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 41px;
		color: #333333;
		display: flex;
		flex-direction: row;
		margin-top: 10px;
	}

	.answer_title:hover {
		color: #33AAFF;
		cursor: pointer;
		transition-duration: 0.4s;
	}

	.answer_text {
		width: 910px;
		height: 70px;
		font-size: 20px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 34px;
		color: #A8A8A8;
		text-align: left;
		/* letter-spacing: 56px; */
		margin-left: 55px;
		margin-top: 30px;
		overflow: hidden;
	}

	.question_area {
		width: 975px;
		height: 110px;
		position: relative;
		margin: 0 auto;
		margin-top: 40px;
	}

	#textarea>>>.el-textarea__inner {
		border: rgba(51, 170, 255, 1) 1px solid;
		font-size: 18px;
		font-family: Microsoft YaHei;
		line-height: 26px;
		color: #C3C3C3;
		border-radius: 10px;
	}

	.submit {
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 26px;
		color: #33AAFF;
		position: absolute;
		bottom: 8px;
		left: 910px;
	}

	.submit:hover {
		cursor: pointer;
	}

	.specialist_q {
		width: 100%;
		height: 595px;
		background-color: #fff;
	}

	.specialist_content {
		width: 300px;
		height: 132px;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
		margin-top: 35px;
		border-bottom: 1px dashed #33AAFF;
	}

	.specialist_content:hover {
		cursor: pointer;
	}

	.dashedoff {
		border: none;
	}

	.avater2 {
		width: 112px;
		height: 112px;
		margin-left: 18px;
	}

	.specialist_right {
		width: 96px;
		height: 96px;
		margin-left: 12px;
		font-family: Noto Sans SC;
		text-align: left;
		display: flex;
		flex-direction: column;
	}

	.specialist_name {
		font-size: 24px;
		font-weight: 400;
		line-height: 41px;
		color: #4D4D4D;
		transition-duration: 0.4s;
	}

	.specialist_name:hover {
		color: rgba(51, 170, 255, 1);
	}

	.specialist_middle {
		font-size: 16px;
		font-weight: 400;
		line-height: 27px;
		color: #BBBBBB;
		position: relative;
		top: 10px;
	}

	.specialist_subject {
		font-size: 24px;
		font-weight: 400;
		line-height: 41px;
		color: #33AAFF;
	}

	.service_area {
		width: 337px;
		height: 324px;
		background-color: #fff;
		margin-top: 32px;
	}

	.area_content {
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 400;
		line-height: 41px;
		color: rgba(77, 77, 77, .8);
		margin-top: 13px;
		/* margin-left: 7px; */
		margin-right: 22px;
		display: inline-block;
	}

	.clear {
		clear: both
	}

	.icon_img {
		width: 25px;
		height: 25px;
	}

	.icon_img2 {
		width: 32px;
		height: 25px;
		position: relative;
		left: -5px;
	}

	.icon_question {
		width: 30px;
		height: 30px;
	}

	.answer_title_text {
		margin-left: 25px;
	}
	.videolink{
		font-size: 20px;
	}
</style>
